<!--
  Copyright 2016-2018 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<div ng-include src="'template/gt-http-error-overlay.html'"></div>
<div style="margin: 15px;">
  <form name="formCtrl"
        style="padding-top: 15px;"
        novalidate>
    <div class="form-group row">
      <label class="col-xl-3 gt-form-label-xl"
             for="reportFromDate">
        From
      </label>
      <div class="col-xl-9">
        <div gt-date-picker
             gt-model="report.fromDate"
             gt-form="formCtrl"
             gt-id="reportFromDate"></div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-xl-3 gt-form-label-xl"
             for="reportToDate">
        To
      </label>
      <div class="col-xl-9">
        <div gt-date-picker
             gt-model="report.toDate"
             gt-form="formCtrl"
             gt-id="reportToDate"></div>
      </div>
    </div>
    <div class="form-group row"
         ng-if="layout.central">
      <label class="col-xl-3 gt-form-label-xl"
             for="reportAgentRollupIds">
        Agents
      </label>
      <div class="col-xl-9">
        <select gt-multiselect
                multiple
                ng-model="report.agentRollupIds"
                required
                class="d-none"
                style="min-width: 200px; max-width: 650px;"
                gt-none-selected-text="Select agents..."
                id="reportAgentRollupIdSelect">
          <option ng-repeat="agentRollup in allAgentRollups track by agentRollup.id"
                  ng-value="agentRollup.id" data-val="{{agentRollup}}">
            {{agentRollup.indentedDisplay}}
          </option>
        </select>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-xl-3 gt-form-label-xl"
             for="reportMetric">
        Metric
      </label>
      <div class="col-xl-9">
        <select ng-model="report.metric"
                ng-required="true"
                class="custom-select"
                name="reportMetric"
                id="reportMetric"
                style="width: auto;">
          <option value="" ng-if="!report.metric" disabled></option>
          <option ng-repeat="metric in metrics track by metric.id"
                  ng-value="metric.id"
                  ng-disabled="metric.disabled"
                  ng-style="{'font-weight': metric.heading ? 'bold' : 'normal'}">
            {{metric.display}}
          </option>
        </select>
      </div>
    </div>
    <div class="form-group row"
         ng-if="showTransactionTypeAndName()">
      <label class="col-xl-3 gt-form-label-xl"
             for="reportTransactionType">
        Transaction type
      </label>
      <div class="col-xl-9">
        <select ng-model="report.transactionType"
                class="custom-select"
                name="reportTransactionType"
                id="reportTransactionType"
                style="width: 100%; max-width: 25em;"
                required>
          <option value="__________"
                  disabled
                  ng-if="!report.agentRollupIds.length">
            (select one or more agents to see available transaction types)
          </option>
          <option value="" ng-if="report.agentRollupIds.length && !report.transactionType" disabled></option>
          <option ng-repeat="transactionType in transactionTypes"
                  ng-value="transactionType">
            {{transactionType}}
          </option>
        </select>
      </div>
    </div>
    <div gt-form-group
         gt-label="Transaction name"
         gt-model="report.transactionName"
         gt-width="20em"
         ng-if="showTransactionTypeAndName()">
    </div>
    <div gt-form-group
         gt-label="Percentile"
         gt-model="report.percentile"
         gt-number="true"
         gt-pattern="pattern.percentage"
         gt-width="7em"
         gt-addon="percentile"
         gt-required="report.metric === 'transaction:x-percentile'"
         ng-if="report.metric === 'transaction:x-percentile'">
    </div>
    <div class="form-group row">
      <label class="col-xl-3 gt-form-label-xl"
             for="reportRollup">
        Rollup
      </label>
      <div class="col-xl-9">
        <select ng-model="report.rollup"
                ng-options="rollup.toLowerCase() as rollup for rollup in rollups"
                class="custom-select"
                id="reportRollup"
                style="width: 100%; max-width: 10em;">
        </select>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-xl-3 gt-form-label-xl"
             for="reportTimeZone">
        Time zone
      </label>
      <div class="col-xl-9">
        <select ng-model="report.timeZoneId"
                ng-options="timeZoneId for timeZoneId in timeZoneIds"
                class="custom-select"
                id="reportTimeZone"
                style="width: 100%; width: auto;">
        </select>
        <div class="help-block" ng-if="useFourHourAggregates">
          Time zone selection is limited because the time range exceeds the configured retention for 30-minute
          interval data and so 4-hour interval data must be used instead.
        </div>
      </div>
    </div>
    <div class="form-group row pt-3 pt-xl-0">
      <div class="offset-xl-3 col-xl-9">
        <div gt-button
             gt-label="Run report"
             gt-click="runReport(deferred)"
             gt-validate-form="formCtrl"
             class="d-inline-block">
        </div>
      </div>
    </div>
  </form>
  <div ng-if="showChart" style="position: relative;">
    <div class="gt-panel-overlay"
         ng-if="showChartSpinner"
         style="right: -20px; pointer-events: none;">
    </div>
    <div class="gt-chart-container">
      <div gt-spinner
           gt-show="showChartSpinner"
           gt-no-delay="true"
           id="chartSpinner"
           class="gt-chart-panel">
      </div>
      <div class="gt-chart-dimensions" id="chart"></div>
      <div ng-if="chartNoData && !showChartSpinner"
           class="gt-chart-panel"
           style="display: table;">
        <div style="display: table-cell; text-align: center; vertical-align: middle;">
          <div class="gt-chart-no-data">No data for this time period</div>
        </div>
      </div>
    </div>
    <div class="legend" id="chartLegend"
         ng-hide="chartNoData || !layout.central"
         style="text-align: center; margin-top: 10px; width: 100%;">
      <div class="d-inline-block" style="max-width: 600px;">
        <div class="d-inline-block" ng-repeat="seriesLabel in seriesLabels"
             style="margin: 0 6px;">
          <div class="legendColorBox d-inline-block"
               style="border: 1px solid rgb(204, 204, 204); padding: 1px;">
            <div style="width: 4px; height: 0px; border: 5px solid rgb(237, 194, 64); overflow: hidden;"
                 ng-style="{'border': '5px solid ' + seriesLabel.color}">
            </div>
          </div>
          <div class="legendLabel d-inline-block">{{seriesLabel.text}}</div>
        </div>
      </div>
    </div>
    <!-- margin-right is to align better with right hand edge of chart -->
    <table class="table"
           style="margin-top: 50px; margin-right: 15px;"
           ng-if="seriesLabels && !chartNoData">
      <thead>
      <tr>
        <th scope="col" ng-if="layout.central"></th>
        <th ng-repeat="xval in allXvals"
            scope="col"
            style="text-align: right;">
          <a ng-click="sort(xval)"
             class="gt-sortable-table-header"
             ng-if="layout.central"
             style="cursor: pointer;">
            <span ng-class="sortIconClass(xval)"></span>
            {{columnHeader(xval)}}
          </a>
          <span ng-if="!layout.central">
            {{columnHeader(xval)}}
          </span>
        </th>
        <th scope="col"
            style="text-align: right;">
          <a ng-click="sort('overall')"
             class="gt-sortable-table-header"
             ng-if="layout.central"
             style="cursor: pointer; white-space: nowrap;">
            <span ng-class="sortIconClass('overall')"></span>
            Overall
          </a>
          <span ng-if="!layout.central">
            Overall
          </span>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="tableRow in tableRows | orderBy:[sortAttr,'-overall']:sortAsc">
        <th scope="row" ng-if="layout.central">{{tableRow.label}}</th>
        <td ng-repeat="xval in allXvals" style="text-align: right;">
          <a ng-href="{{drillDownLink(tableRow.agentRollupId, xval)}}"
             ng-if="tableRow[xval] !== NEGATIVE_INFINITY">
            {{formatValue(tableRow[xval])}}
          </a>
          <span ng-if="tableRow[xval] === NEGATIVE_INFINITY">
              -
            </span>
        </td>
        <td style="text-align: right;">
          <a ng-href="{{drillDownLinkOverall(tableRow.agentRollupId)}}"
             ng-if="tableRow.overall !== NEGATIVE_INFINITY">
            {{formatValue(tableRow.overall)}}
          </a>
          <span ng-if="tableRow.overall === NEGATIVE_INFINITY">
              -
            </span>
        </td>
      </tr>
      </tbody>
    </table>
    <button class="btn btn-secondary"
            ng-click="exportAsCsv()"
            ng-if="!chartNoData">
      Export as CSV
    </button>
  </div>
</div>
